<template id="module-editor-random-products-template">
  <div class="module-editor-random-products-template">
    @if (version_compare(config('beike.version'), '1.6.0.1') >= 0)
      <module-size v-model="form.module_size"></module-size>
    @else
      <div class="module-editor-row">{{ __('admin/builder.text_set_up') }}</div>
    @endif

    <div class="module-edit-group">
      <div class="module-edit-title">{{ __('admin/builder.text_module_title') }}</div>
      <text-i18n v-model="form.title"></text-i18n>
    </div>

    <div class="module-editor-row">{{ __('admin/builder.modules_content') }}</div>
    <div class="module-edit-group">
      <div class="module-edit-title">{{ __('GdRandomProducts::common.type') }}</div>
      <el-radio-group v-model="form.type" @change="typeChange">
        <el-radio-button label="all">{{ __('GdRandomProducts::common.all') }}</el-radio-button>
        <el-radio-button label="category">{{ __('GdRandomProducts::common.category') }}</el-radio-button>
        <el-radio-button label="brand">{{ __('GdRandomProducts::common.brand') }}</el-radio-button>
      </el-radio-group>
      <div style="font-size: 12px;color: #999;margin-top: 4px;">{{ __('GdRandomProducts::common.type_explain') }}</div>
    </div>
    <div class="module-edit-group" v-if="form.type !== 'all'">
      <div class="module-edit-title">{{ __('GdRandomProducts::common.content') }}</div>
      <div class="tab-info">
        <div class="module-edit-group">
          <div class="autocomplete-group-wrapper">
            <el-autocomplete
              class="inline-input"
              popper-class="product-autocomplete-list"
              v-model="keyword"
              value-key="name"
              :fetch-suggestions="querySearch"
              placeholder="{{ __('admin/builder.modules_keywords_search') }}"
              :highlight-first-item="true"
              @select="rphandleSelect"
              >
            </el-autocomplete>
            <div style="font-size: 12px;color: #999;margin-top: -6px;">{{ __('GdRandomProducts::common.search_brand') }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="module-edit-group">
      <div class="module-edit-title">{{ __('GdRandomProducts::common.quantity') }}</div>
      <el-input-number v-model="form.quantity" :min="1" :max="100"></el-input-number>
      <div style="font-size: 12px;color: #999;margin-top: 4px;">{{ __('GdRandomProducts::common.module_quantity') }}</div>
    </div>
    <div class="module-edit-group">
      <div class="module-edit-title">{{ __('GdRandomProducts::common.columns') }}</div>
      <el-select v-model="form.columns" placeholder="请选择">
        <el-option label="3" value="3"></el-option>
        <el-option label="4" value="4"></el-option>
        <el-option label="5" value="5"></el-option>
        <el-option label="6" value="6"></el-option>
      </el-select>
      <div style="font-size: 12px;color: #999;margin-top: 4px;">{{ __('GdRandomProducts::common.per_row') }}</div>
    </div>
  </div>
</template>

<script type="text/javascript">
Vue.component('module-editor-random-products', {
  template: '#module-editor-random-products-template',
  props: ['module'],
  data: function () {
    return {
      loading: null,
      keyword: '',
      form: null
    }
  },

  watch: {
    form: {
      handler: function (val) {
        this.$emit('on-changed', val);
      },
      deep: true
    },
  },

  created: function () {
    this.form = JSON.parse(JSON.stringify(this.module));
    if (this.form.type !== 'all') {
      this.loadData();
    }
  },

  computed: {
  },

  methods: {
    loadData() {
      if (!this.form.content) {
        return;
      }

      const url = `${this.form.type === 'category' ? 'categories' : 'brands'}/${this.form.content}/name`;

      this.loading = true;
      $http.get(url, {hload: true}).then((res) => {
        this.loading = false;
        this.keyword = res.data;
      })
    },

    tabTitleLanguage(titles) {
      return titles['{{ locale() }}'];
    },

    typeChange() {
      this.form.content = '';
      this.keyword = '';
    },

    querySearch(keyword, cb) {
      const url = `${this.form.type === 'category' ? 'categories' : 'brands'}/autocomplete`;
      $http.get(url + '?name=' + encodeURIComponent(keyword), null, {hload:true}).then((res) => {
        cb(res.data);
      })
    },

    rphandleSelect(item) {
      this.form.content = item.id;
    }
  }
});
</script>

@push('footer-script')
  <script>
    register = @json($register);

    register.make = {
      style: {
        background_color: ''
      },
      floor: languagesFill(''),
      @if (version_compare(config('beike.version'), '1.6.0.0') >= 0)
      module_size: 'container-fluid',// 窄屏、宽屏、全屏
      @else
      module_size: 'container',
      @endif
      type: 'all',
      content: '',
      quantity: 10,
      columns: 5,
      title: languagesFill('{{ __('admin/builder.text_module_title') }}'),
    };

    app.source.modules.push(register)
  </script>
@endpush
